/* 从右边进入 */
.fade-right-enter-active {
  transition: all .4s ease;
}

.fade-right-leave-active {
  transition: all .4s ease;
}

.fade-right-enter,
.fade-right-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(50px);
  opacity: 0;
}

/* 延迟1s从右边进入 */
.fade-right-1s-enter-active {
  transition: all .4s ease;
  transition-delay: 1s;
}

.fade-right-1s-leave-active {
  transition: all .4s ease;
}

.fade-right-1s-enter,
.fade-right-1s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(50px);
  opacity: 0;
}

/* 延迟0.1s从右边进入 */
.fade-right-01s-enter-active {
  transition: all .1s ease;
  transition-delay: 1s;
}

.fade-right-01s-leave-active {
  transition: all .1s ease;
}

.fade-right-01s-enter,
.fade-right-01s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(50px);
  opacity: 0;
}

/* 从左边进入 */
.fade-left-enter-active {
  transition: all .4s ease;
}

.fade-left-leave-active {
  transition: all .4s ease;

}

.fade-left-enter,
.fade-left-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}

/* 延时1秒从左边进入 */
.fade-left-1s-enter-active {
  transition: all .4s ease;
  transition-delay: 1s;
}

.fade-left-1s-leave-active {
  transition: all .4s ease;
}

.fade-left-1s-enter,
.fade-left-1s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(-50px);
  opacity: 0;
}

/* 延时0.1秒从左边进入 */
.fade-left-01s-enter-active {
  transition: all .1s ease;
  transition-delay: 1s;
}

.fade-left-01s-leave-active {
  transition: all .1s ease;
}

.fade-left-01s-enter,
.fade-left-01s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(-50px);
  opacity: 0;
}

/* 延时2秒从左边进入 */
.fade-left-2s-enter-active {
  transition: all .4s ease;
  transition-delay: 2s;
}

.fade-left-2s-leave-active {
  transition: all .4s ease;
}

.fade-left-2s-enter,
.fade-left-2s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(-50px);
  opacity: 0;
}

/* 延时3秒从左边进入 */
.fade-left-3s-enter-active {
  transition: all .4s ease;
  transition-delay: 3s;
}

.fade-left-3s-leave-active {
  transition: all .4s ease;
}

.fade-left-3s-enter,
.fade-left-3s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(-50px);
  opacity: 0;
}

/* 缩放进入 */
.fade-scale-enter-active {
  transition: all .4s ease;
}

.fade-scale-leave-active {
  transition: all .4s ease;
}

.fade-scale-enter,
.fade-scale-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: scaleX(.1);
  opacity: 0;
}

/* 延时2s缩放进入,这个类名为专用 */
.fade-scale-2s-enter-active {
  transition: all .4s ease;
  transition-delay: 2s;
}

.fade-scale-2s-leave-active {
  transition: all .4s ease;
}

.fade-scale-2s-enter,
.fade-scale-2s-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: scaleX(.1);
  opacity: 0;
}

/* 从下面进入 */
.fade-bottom-enter-active {
  transition: all .4s ease;
}

.fade-bottom-leave-active {
  transition: all .4s ease;
}

.fade-bottom-enter,
.fade-bottom-leave-to {
  transform: translatey(50px);
  opacity: 0;
}

.slide-left-enter-active,

.slide-left-leave-active {

  transition: 0.3s transform ease;

  backface-visibility: hidden;



}

.slide-left-enter {

  transform: translate3d(-100%, 0, 0);

}

.slide-left-enter-to,

.slide-left-leave {

  transform: translate3d(0%, 0, 0);

}

.slide-left-leave-to {

  transform: translate3d(100%, 0, 0);

}

.slide-right-enter-active,

.slide-right-leave-active {

  transition: 0.3s all ease-out;

  backface-visibility: hidden;



}

.slide-right-enter {

  transform: translate3d(100%, 0, 0);

}

.slide-right-enter-to,

.slide-right-leave {

  transform: translate3d(0, 0, 0);

}

.slide-right-leave-to {

  transform: translate3d(-100%, 0, 0);

}